this 指的是函数运行时所在的环境

函数调用会产生新的 this

## 全局中的 this

```html
// 浏览器环境中的this 是Window // Node中的this Global

<script>
  console.log(this); // Window
</script>
```

## 普通函数中的 this

普通函数调用，this 指向 Window

```js
function Fn() {
  console.log(this);
}

Fn(); // Window
```

## 箭头函数中的 this

箭头函数无 this，会找上一层 this

```js
const arrow = () => {
  console.log(this);
};
arrow(); // Window
```

## 构造函数中的 this

```js
function Fn() {
  console.log(this);
}
const example = new Fn(); // Fn 自身
```

## 对象中的 this

```js
const obj = {
  name: "张三",
  age: 18,
  sex: 0,
  getName: function () {
    console.log(this);
  },
  getAge: () => {
    console.log(this);
  },
  getSex() {
    (function () {
      // IIFE
      console.log(this);
    })();
  },
};

obj.getName(); // obj
obj.getAge(); //Window  箭头函数无this，找上一层this
obj.getSex(); //Window  立即执行函数(IIFE)同普通函数调用一样，this永远都是Window
obj.fn(); //obj

let getName = obj.getName; // js是词法作用域
getName(); // Window 同普通函数调用一样，

//等同于
let getName = function () {
  console.log(this);
};

// 改变getName 的this
function Fn() {
  console.log(this);
}
const example = new Fn(); // Fn 自身

obj.getName.call = example; //Fn  //同类型的方法还有bind, apply
```

## 数组 中的 this

```js
const thisArray = [
  function () {
    console.log("thisArray[0]", this);
  },
  () => {
    console.log("thisArray[1]", this);
  },
  {
    fn: () => console.log("thisArray[2].fn", this),
    fn2() {
      console.log("thisArray[2].fn2", this);
    },
  },
];

thisArray[0](); //[ƒ, ƒ, {…}]
thisArray[1](); // Window
thisArray[2].fn(); // Window
thisArray[2].fn2(); // {fn: ƒ, fn2: ƒ}
```

## Dom 中的 this

this 的指向取决于函数调用的位置；

```js
document.getElementById("btn1").onclick = function () {
  console.log(this); // <button id="btn1">btn1</button>
};

document.getElementById("btn2").onclick = () => {
  console.log(this); // Window
};

document.getElementById("btn3").addEventListener("click", function () {
  console.log(this); // <button id="btn1">btn1</button>
});

document.getElementById("btn4").addEventListener("click", () => {
  console.log(this); // Window
});
```

## 严格模式下的 this

严格模式下 普通函数内的 this 是 undefined

```html
<script>
  "use strict";
  function fn() {
    console.log(this);
  }
  fn(); // undefined
</script>
```

https://zhuanlan.zhihu.com/p/42145138


## with 语句中的 this

```js
let name = "李四";
let obj = {
  name: "张三",
};
with (obj) {
  console.log(name); // 张三
  console.log(this); // Window
}
```

this 的值可以通过不同的绑定方式来确定。下面介绍一些常见的绑定方式：
- 默认绑定：如果函数调用不是通过任何上下文对象发生的，即没有被任何对象调用，那么默认绑定就会发生。在默认绑定中，this 的值指向全局对象（在浏览器中是 window 对象）。
```js
function foo() {
  console.log(this);
}

foo(); // this指向全局对象
```

- 显式绑定：可以通过 call() 或 apply() 方法显式地指定函数执行时的上下文对象。在这种情况下，this 的值会被设置为传递给 call() 或 apply() 方法的第一个参数。
```js
function foo() {
  console.log(this);
}

var obj = { name: 'Alice' };
foo.call(obj); // this指向obj对象
```

- 隐式绑定：当函数作为对象的方法调用时，this 的值被隐式地设置为该对象。
```js 
var obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // this指向obj对象，输出'Alice'
```

除了上述三种绑定方式之外，还有一些其他绑定方式，如 new 绑定、箭头函数绑定等。理解这些绑定方式对于理解 this 的行为和使用具有重要意义。



在 JavaScript 中，this 是一个关键字，用于引用当前代码执行上下文中的对象。this 指针的值取决于函数的调用方式，下面是一些常见的用法：

- 在全局作用域中，this 指向全局对象（在浏览器中是 window 对象）。
- 在函数中，this 的值取决于函数如何被调用。如果函数是作为对象的方法调用，那么 this 指向该对象；如果函数是独立调用的，那么 this 指向全局对象。
- 当使用 call() 或 apply() 方法调用函数时，this 的值被设置为传递给这些方法的第一个参数，也就是方法的调用者。
- 在 ES6 中，使用箭头函数时，this 的值继承自父作用域。

this 的值是动态绑定的，根据函数调用方式的不同而改变。在开发中需要小心使用 this，



